<template>
  <el-row :gutter="10">
    <el-col :xs="24" :sm="12" :lg="6">
      <Card title="总销售额" value="￥ 126560">
        <template>
          <div>
            <span class="dashboard-card-span">月同比 56.67%</span>
            <i class="el-icon-caret-top dashboard-card-top" />
          </div>
          <div>
            <span class="dashboard-card-span">日同比 19.16%</span>
            <i class="el-icon-caret-bottom dashboard-card-bottom" />
          </div>
        </template>
        <template #footer>
          <div>日销售额￥ 12423</div>
        </template>
      </Card>
    </el-col>
    <el-col :xs="24" :sm="12" :lg="6">
      <Card title="浏览量" value="88460">
        <template>
          <ChartLine />
        </template>
        <template #footer>
          <div>日访问量 1234</div>
        </template>
      </Card>
    </el-col>
    <el-col :xs="24" :sm="12" :lg="6">
      <Card title="支付笔数" value="182425">
        <template>
          <ChartBar />
        </template>
        <template #footer>
          <div>转化率 60.2%</div>
        </template>
      </Card>
    </el-col>
    <el-col :xs="24" :sm="12" :lg="6">
      <Card title="运营活动效果" value="78%">
        <template>
          <ChartVbar />
        </template>
        <template #footer>
          <div class="minitor-flex">
            <div>
              <span>周同比12%</span>
              <i class="el-icon-caret-top dashboard-card-top" />
            </div>
            <div>
              <span>日同比11%</span>
              <i class="el-icon-caret-bottom dashboard-card-bottom" />
            </div>
          </div>
        </template>
      </Card>
    </el-col>
  </el-row>
</template>

<script>
import Card from './components/Card'
import ChartLine from './components/ChartLine'
import ChartBar from './components/ChartBar'
import ChartVbar from './components/ChartVbar'

export default {
  name: 'Minitor',
  components: {
    Card,
    ChartLine,
    ChartBar,
    ChartVbar
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 10px;
  }
}
.dashboard-card-span {
  color: #303133;
  font-size: 14px;
}
.dashboard-card-top {
  color: red;
  // padding-right: 20px;
}
.dashboard-card-bottom {
  color: green;
}
// 弹性布局
.minitor-flex {
  display: flex;
  justify-content: space-between;
}
</style>
